<template>
    <div class="base-pic-box" :style='`width: ${size}px;heighe: ${size}px`' :class='{isActive: active}'>
        <div class="pic-point">{{points}}</div>
        <div v-if='active' class="pic-close">X</div>
        <img :src="url||''" >
    </div>
</template>
<script>
export default {
    props: {
        url: {type: String, default: 'logo.png'},
        points: {type: Number, default: 1},
        active: {type: Boolean, default: true},
        size: {type: Number, default: 60}
    },
    data: () => ({
    }),

    created() {
    }
}
</script>
<style lang="scss" scoped>
.base-pic-box.isActive{
    margin: 5px 10px; 
    transform: scale(1.1, 1.1);
    border: 1px solid orange;
}
.base-pic-box{
    margin: 5px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 3px;
    box-sizing: border-box;
    position: relative;
    img{width: 100%; height: 100%; }
    .pic-point,.pic-close{
        position: absolute;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        line-height: 20px;
        text-align: center;
        font-size: 12px;
    }
    .pic-point{
        background: red;
        color: #fff;
        transform: scale(0.8, 0.8);
        top: -3px;
        left: -3px;
    }
    .pic-close{
        background: red;
        color: #fff;
        transform: scale(0.8, 0.7);
        top: -10px;
        right: -10px;
        border: 1px solid #fff;
    }
}
</style>